/* 人事-人事审批-审批表单  */
import { FunctionalComponent as FC } from 'vue';
import { useRouter } from 'vue-router';
import PageHeaderNew from '@/components/PageHeaderNew/index.vue';
import IconFont from '@/components/IconFont/index.vue';
import AddGroup from './Components/AddGroup';
import Sort from './Components/Sort/index.vue';
import style from './ExamineForm.module.less';
import { cloneDeep } from 'lodash';

interface Iitems {
  title: string; // 分组名称
  tips: string; // 分组描述

  //子类
  children: {
    title: string; // 标题
    form: string; // 表单
    examine: string; // 审批流程
    state: number; // 启用状态 1启用 2否
  }[];
}

// 主组件
export default defineComponent({
  components: {
    AddGroup
  },
  setup(props) {
    const title = '审批表单';

    const breadCrumb: string[] = ['人事', '人事审批', '审批表单'];

    const addVisiable = ref(false);
    // 新增分组事件
    const addGroupEvent = () => {
      addVisiable.value = true;
    };

    // 新增分组按钮
    const addGroup = (
      <a-button type="primary" onClick={addGroupEvent}>
        新增分组
      </a-button>
    );

    // 新增分组自定义事件
    const groupAddEmit = (formData: any) => {
      console.log(formData);
    };

    const sortVisiable = ref(false);

    // 分组排序按钮事件
    const sortGroupEvent = () => {
      sortVisiable.value = true;
    };

    // 分组排序按钮
    const sortGrouop = <a-button>分组排序</a-button>;

    const sortChange = (list: any) => {
      items.value = list;
      console.log(items.value);

      console.log(list);
    };

    const items: Ref<Iitems[]> = ref([
      {
        title: '入职审批组',
        tips: '入职审批组',
        children: [
          {
            title: '阿斯达实打实大所大所',
            form: '11111',
            examine: '12210',
            state: 1
          },
          {
            title: '阿斯达实打实大所大所',
            form: '11111',
            examine: '12210',
            state: 1
          },
          {
            title: '阿斯达实打实大所大所',
            form: '11111',
            examine: '12210',
            state: 1
          },
          {
            title: '阿斯达实打实大所大所',
            form: '11111',
            examine: '12210',
            state: 1
          },
          {
            title: '阿斯达实打实大所大所',
            form: '11111',
            examine: '12210',
            state: 1
          },
          {
            title: '1233',
            form: '11111',
            examine: '12210',
            state: 1
          }
        ]
      },
      {
        title: '转正审批组',
        tips: '转正审批组',
        children: [
          {
            title: 'xc',
            form: '11111',
            examine: '12210',
            state: 2
          }
        ]
      }
    ]);

    return () => (
      <div>
        <PageHeaderNew
          title={title}
          breadCrumb={breadCrumb}
          v-slots={{
            buts: () => {
              return (
                <div>
                  <addGroup
                    style={{
                      marginRight: '10px'
                    }}
                  ></addGroup>
                  <sortGrouop onClick={sortGroupEvent}></sortGrouop>
                </div>
              );
            }
          }}
        ></PageHeaderNew>
        <div class={style.wrap}>
          {items.value.map((item: Iitems) => (
            <Items {...(item as any)}></Items>
          ))}
        </div>
        <Sort
          v-model:visible={sortVisiable.value}
          list={items.value}
          onSortChange={sortChange}
        ></Sort>
        <AddGroup
          v-model:visible={addVisiable.value}
          onGroupAddEmit={groupAddEmit}
        ></AddGroup>
      </div>
    );
  }
});

// 子类组件
const Items = defineComponent({
  props: {
    title: {
      type: String
    },
    tips: {
      type: String
    },
    children: {
      type: Array
    }
  },
  setup(props) {
    const router = useRouter();

    // 新增分组
    const addFlow = () => {
      router.push({
        name: 'HumanExamineFormSetting',
        query: {}
      });
    };

    const editFlow = (record: any) => {
      console.log(record);
    };

    // 判断是否点击了修改分组按钮
    const edit = ref(false);

    const currTitle = ref(''); // 储存当前的分组名称
    watch(
      () => props.title,
      (newVal: string | undefined) => {
        currTitle.value = newVal as string;
      },
      {
        immediate: true
      }
    );

    // 点击修改分组名称按钮
    const editName = () => {
      edit.value = !edit.value;
    };

    // 确认重命名
    const okRename = () => {
      edit.value = false;
      console.log(111);
    };

    // 删除分组
    const del = () => {
      //
    };

    return () => (
      <div class={style.item}>
        <div class={style.header}>
          <div
            style={{
              position: 'absolute',
              top: '8px',
              left: '20px',
              zIndex: 9
            }}
          >
            <div
              style={{
                display: 'flex'
              }}
            >
              <div
                style={{
                  position: 'relative',
                  top: '-2px'
                }}
              >
                {edit.value === false ? (
                  <span>{currTitle.value}</span>
                ) : (
                  <a-input-search
                    allowClear
                    search-button
                    v-model={currTitle.value}
                    v-slots={{
                      'button-icon': () => {
                        return (
                          <>
                            <a-popconfirm
                              onOk={okRename}
                              content="确定要重命名吗?"
                            >
                              <icon-check size={26} />
                            </a-popconfirm>
                          </>
                        );
                      }
                    }}
                  ></a-input-search>
                )}
              </div>

              <div>
                <a-tooltip content={props.tips}>
                  <icon-info-circle-fill
                    style={{
                      color: '#165dff',
                      marginLeft: '5px'
                    }}
                    size={18}
                  />
                </a-tooltip>
              </div>
            </div>
          </div>
          <div
            style={{
              float: 'right'
            }}
          >
            <a-space>
              <a-button type="primary" onClick={addFlow}>
                新增流程
              </a-button>
              <a-button onClick={editName} type="outline">
                修改分组名称
              </a-button>
              <a-popconfirm onOk={del} content="确定删除该分组吗?">
                <a-button type="primary" status="danger">
                  删除分组
                </a-button>
              </a-popconfirm>
            </a-space>
          </div>
        </div>
        <a-space size={16} wrap>
          {(props.children as any).map((item: any) => {
            return (
              <a-card
                class={style.card}
                hoverable
                onClick={() => editFlow(item)}
              >
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-around'
                  }}
                >
                  <a-avatar
                    style={{
                      width: '50px',
                      height: '50px',
                      marginRight: '10px'
                    }}
                    shape="square"
                  >
                    A
                  </a-avatar>
                  <div
                    style={{
                      marginRight: '10px'
                    }}
                  >
                    <div> {item.title} </div>
                    <div> {item.form} </div>
                    <div> {item.examine} </div>
                  </div>
                  <div>
                    <a-button
                      style={{
                        height: '20px'
                      }}
                      type="outline"
                    >
                      {item.state === 1 ? '启用' : '不启用'}
                    </a-button>
                  </div>
                </div>
              </a-card>
            );
          })}
        </a-space>
      </div>
    );
  }
});
